@import url('~@/styles/animations.less');

.page {
    position: relative;
    height: 100vh;
    background: url('~@/assets/report/entry/bg.png') no-repeat center;
    background-size: cover;

    &_top {
        position: relative;
        // top: 112px;
        top: 48px;
        z-index: 999;
        display: flex;
        flex-direction: column;
        gap: 16px;
        margin: 0 30px;

        .orgTitle {
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 18px;

            .logo {
                width: 34px;
                height: 24px;
                background: url('~@/assets/logo.png') no-repeat center;
                background-size: contain;
            }
        }

        .mainTitle {
            width: 315px;
            height: 80px;
            margin: 0 auto;
            background: url('~@/assets/report/shareGuide/title.png') no-repeat center;
            background-size: contain;
        }
    }

    .arrowSign {
        position: absolute;
        top: 32px;
        right: 32px;
        width: 60px;
        height: 41px;
        background: url('~@/assets/report/shareGuide/arrow.png') no-repeat center;
        background-size: contain;
    }

    .bigStuff {
        .bounce-down();

        position: absolute;
        top: 44%;
        right: 3px;
        width: 181px;
        height: 181px;
        background: url('~@/assets/report/shareGuide/stuff_big.png') no-repeat center;
        background-size: contain;
    }
    .smallStuff {
        .bounce-down(2s, 0.5s);

        position: absolute;
        // top: 318px;
        top: 39%;
        left: 39px;
        width: 66px;
        height: 62px;
        background: url('~@/assets/report/shareGuide/stuff_small.png') no-repeat center;
        background-size: contain;
    }

    .bottomPng {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 560px;
        background: url('~@/assets/report/shareGuide/png_bottom.png') no-repeat center;
        background-size: contain;
    }

    &_bottom {
        position: absolute;
        // bottom: 50px;
        bottom: 6%;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
}
